{% extends "public/base.html" %} {% block main %}
<div class="admin-content">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf">
            <a href="{{url(nav[0]['url'])}}"><strong class="am-text-primary am-text-lg">{{nav[0]['title']}}</strong></a> {% if nav[1]['title'] is not empty %} /
            <a href="{{url(nav[1]['url'])}}" style="color:#333"><small>{{nav[1]['title']}}</small></a> {% endif %}
        </div>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">
                    <a href="{{url('menu/new')}}" class="am-btn am-btn-success"><span class="am-icon-plus"></span>
                    新增</a>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="am-g">
        <form action="{{url('menu/search')}}" method="get">
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-form-group">
                    <select name="pid" data-am-selected="{btnSize: 'xm',btnWidth: '100%'}">
                        <option value="">全部菜单</option>
                        {% for option in item %}
                        <option value="{{option.id}}">{{option.title}}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'days'}">
                    <input name="startDate" type="text" class="am-form-field" placeholder="开始日期">
                    <span class="am-input-group-btn am-datepicker-add-on">
                    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span></button>
                    </span>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'days'}">
                    <input name="endDate" type="text" class="am-form-field" placeholder="结束日期">
                    <span class="am-input-group-btn am-datepicker-add-on">
                    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span></button>
                    </span>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group">
                    <input name="title" type="text" class="am-form-field" placeholder="菜单标题">
                    <span class="am-input-group-btn">
                    <button class="am-btn am-btn-default" type="submit">搜索</button>
                    </span>
                </div>
            </div>
        </form>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                        <tr>
                            <th class="table-check">
                                <input type="checkbox" />
                            </th>
                            <th>菜单编号</th>
                            <th>菜单标题</th>
                            <th>菜单链接</th>
                            <th>分组菜单</th>
                            <th>是否隐藏</th>
                            <th>管理</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for menu in page.items %}
                        <tr id="tr{{menu.id}}">
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td>{{menu.id}}</td>
                            <td><a href="{{url('menu/index?pid='~menu.id)}}">{{menu.title}}</a></td>
                            <td>{{menu.url}}</td>
                            <td>{{menu.is_group?"是":"否"}}</td>
                            <td>{{menu.is_hide?"是":"否"}}</td>
                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <a href="{{url('menu/edit?id='~menu.id)}}">
                                            <button type="button" class="am-btn am-btn-default  am-btn-xs am-text-primary">
                                                <span class="am-icon-pencil-square-o"></span> 编辑
                                            </button>
                                        </a>
                                        <a href="javascript:;" class="delete" data-id="{{menu.id}}">
                                            <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
                                                <span class="am-icon-trash-o"></span> 删除
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="am-cf">
                    共{{ page.total_pages }}页、{{page.total_items}}条记录
                    <br> {% if page.total_pages > 1 %}
                    <div class="am-fr">
                        <ul class="am-pagination">
                            <li>
                                {{ link_to("menu/index", 'First','class':'am-btn am-btn-xs') }}
                            </li>
                            <li {% if page.current==1 %}class="am-disabled" {% endif %}>
                                {{ link_to("menu/index?page=" ~ page.before, 'Prev','class':'am-btn am-btn-xs') }}
                            </li>
                            <?php
                                $i=1;
                                while ($i <= $page->total_pages) {
                                    if ($page->current == $i) {
                                        echo '<li class="am-active"><a href="index?page='.$i.'" class="am-btn am-btn-xs">'.$i.'</a></li>';
                                    }else{
                                        echo '<li><a href="index?page='.$i.'" class="am-btn am-btn-xs">'.$i.'</a></li>';
                                    }
                                $i++;
                                }
                            ?>
                                <li {% if page.current==page.total_pages %}class="am-disabled" {% endif %}>
                                    {{ link_to("menu/index?page=" ~ page.next, 'Next','class':'am-btn am-btn-xs') }}
                                </li>
                                <li>
                                    {{ link_to("menu/index?page=" ~ page.last, 'Last','class':'am-btn am-btn-xs') }}
                                </li>
                        </ul>
                    </div>
                    {% endif %}
                </div>
                <hr/>
                <p>注：.....</p>
            </form>
        </div>
    </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">Amaze UI</div>
        <div class="am-modal-bd">
            {{user['user_name']}}，确定要删除这条记录吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
{% endblock %} {% block javascript %}
<script language="javascript">
$(document).ready(function() {
    var id;
    $('.delete').click(function() {
        id = $(this).attr('data-id');
        $('#delete-confirm').modal({
            relatedTarget: this,
            onConfirm: function(options) {
                $.ajax({
                        url: '{{url("menu/delete")}}',
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            id: id
                        },
                    })
                    .done(function(data) {
                        if (data['id']) {
                            $('#tr' + data['id']).fadeOut('slow');
                        }
                    })
                    .fail(function() {
                        console.log('ajax传输失败');
                    });
            },
            onCancel: function() {}
        });
    });
});
</script>
{% endblock %}
